<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Farrer Drive - Contact us</title>

        <!-- Mobile viewport optimisation -->
        <meta name="viewport" content="width=1280">
        <link href="css/styles.css" rel="stylesheet" type="text/css"/>
        <script src="lib/jquery-1.7.1.min.js"></script>
        <script src="lib/jquery.validate.js"></script>
        <script src="js/custom.js"></script>
    </head>
    <body>
        <script>
            $(document).ready(function() {
                $('.contactus-form-main').css("height", 634/687*$('#contact-us-image').width() - 50);
                setTimeout(function(){
                    $('.light-box').hide();
                    $('.light-box').css("opacity",1);
                },1000);
                $("#contactus-form").validate({
                    submitHandler: function(form) {
                        //$('#contactus-form').fadeOut('medium');
                        alert('Thank you for your submission. We will contact you shortly.');
                        $('#contactus-form')[0].reset();
                        //$('.contactus-thanktyou').fadeIn('medium');
                    },
                    errorPlacement: function(error, element) {
                        // 'this' refers to the form
                        error.appendTo(element.parent("p"));
                        error.css("left", error.parent().find('span').width() + 10 + "px");
                    }
                });
            })
        </script>
        <div class="wrapper">
            <div id="header">
                <img alt="" id="logo" onclick="window.location.href = './'"  src="images/logo.gif" />
            </div>
            <div id="main">

                <div class="slide-container" style="">
                    <div class="menu">
                        <ul>
                            <li>
                                <span><a onclick="return movePage(this)" href="./">Home</home></a></span>
                            </li>
                            <li>
                                <span><a onclick="return movePage(this)" href="design.html">Design</a></span>
                            </li>
                            <li>
                                <span><a onclick="return movePage(this)" href="location.html">Location</a></span>
                            </li>
                            <li>
                                <span><a onclick="return movePage(this)" href="gardens.html">The Gardens</a></span>
                            </li>
                            <li>
                                <span><a onclick="return movePage(this)" href="facilities.html">Facilities</a></span>
                            </li>
                            <li>
                                <span><a onclick="return movePage(this)" href="interior.html">Interior</a></span>
                            </li>
                            <li>
                                <span><a onclick="return movePage(this)" href="floorplans.html">Floor Plans</a></span>
                            </li>
                            <li>
                                <span><a onclick="return movePage(this)" href="gallery.html">Gallery</a></span>
                            </li>
                            <li id="menu-active">
                                <span><a onclick="return movePage(this)" href="contactus.html">Contact us</a></span>
                            </li>
                            <li>
                                <span><a onclick="return movePage(this)" href="developer.html">Developer</a></span>
                            </li>
                        </ul>
                    </div>
                    <div class="images-container" style="display: table;width: 100%">
                        <div style="float:left;position: relative;width: 50%" id="contact-us-image">
                            <img width="100%" style="float: left" class="flexible" alt="Farrer Drive" src="images/contactus.png"　/>
                            <div onclick="showLightBox();
                                    $('.light-box-content').hide();
                                    $('.contact-us-map-lightbox').show();"class="contact-us-map"></div>
                        </div>
                        <div class="contactus-form-container">
                            <div class="contactus-form-main" style="height:438px">
                                <div style="display: none;"class="contactus-thanktyou">
                                    Thank you for your submission. We will contact you shortly.
                                </div>
                                <form id="contactus-form" method="post">
                                    <p class="contact-form-header">Register for a viewing</p>
                                    <p>
                                        <span>First Name</span>
                                        <input type="text" required="" minlength="2" name="fname" id="fname" >
                                    </p>
                                    <p>
                                        <span>Last Name</span>
                                        <input type="text" required="" minlength="2" name="lname" id="lname">
                                    </p>
                                    <p>
                                        <span>Address</span>
                                        <input type="text" required="" minlength="2" name="address" id="address">
                                    </p>
                                    <p>
                                        <span>Contact</span>
                                        <input type="text" required="" minlength="2" name="contact" id="contact">
                                    </p>
                                    <p>
                                        <span>Email</span>
                                        <input type="text" required="" minlength="2" name="email" id="email">
                                    </p>
                                    <p>
                                        <span>Message</span>
                                        <textarea name="message"></textarea>
                                    </p>
                                    <input type="submit" value="Submit">
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="footer" style="">
                <div style="float: left; width: 50%;text-align: center;">
<!--                    <img width="" alt="Farrer Drive" src="images/logos.jpg"　/>-->
                </div>
            </div>
        </div>
        <div class="light-box" style="display: block;opacity: 0">
            <div class="light-box-background" onclick="hideLightBox()">

            </div>
            <div class="light-box-content contact-us-map-lightbox">
<iframe src="https://mapsengine.google.com/map/u/0/embed?mid=z1q6oNDzMihg.k9ihOuLGGBzY" width="640" height="480"></iframe>  <!--                <img width="100%" alt="Farrer Drive" src="images/map.png"　/>-->
            </div>
        </div>
    </body>
</html>
